<!-- src/components/CanvasComponent.vue -->
<template>
  <div class="canvas-container">
    <!-- 画布元素 -->
    <canvas ref="canvasEl" id="myCanvas">
      当前浏览器不支持画布，请下载最新的浏览器
    </canvas>
    <!-- 控制按钮 -->
    <div class="list-r-12">
      <el-button type="primary" @click="draw">开始绘画</el-button>
      <el-button @click="clear">清空画布</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Canvas from '@/utils/Canvas.ts';
// 用来保存 canvas 实例
let canvasInstance: Canvas | null = null;

// 获取 canvas DOM 元素引用
const canvasEl = ref<HTMLCanvasElement | null>(null);

const canvasData = reactive({
  width: 600,
  height: 400,
  background: '#f9f9f9',
  options: [
    // {
    //   type: 'text',
    //   text: '开始绘制画布',
    //   x: 200,
    //   y: 50,
    //   color: 'green',
    //   fontSize: 16,
    //   fontFamily: 'Arial',
    // },
    // {
    //   type: 'rect',
    //   x: 80,
    //   y: 80,
    //   width: 150,
    //   height: 80,
    //   strokeColor: 'green',
    //   lineWidth: 10,
    // },
    // {
    //   type: 'rect',
    //   x: 100,
    //   y: 100,
    //   width: 150,
    //   height: 80,
    //   fillColor: 'blue',
    // },
    {
      type: 'circle',
      title: '绘制笑脸',
      children: [
        {
          type: 'circle',
          title: '脸',
          x: 275,
          y: 175,
          radius: 50,
          startAngle: 0,
          endAngle: Math.PI * 2,
          direction: false,
          lineWidth: 3,
          strokeColor: '#ff0000',
        },
        {
          type: 'circle',
          title: '嘴巴',
          x: 275,
          y: 175,
          radius: 35,
          startAngle: 0,
          endAngle: Math.PI,
          direction: false,
        },
        {
          type: 'circle',
          title: '左眼',
          x: 260,
          y: 165,
          radius: 5,
          startAngle: 0,
          endAngle: Math.PI * 2,
          direction: true,
          fillColor: '#000',
          color: 'green',
        },
        {
          type: 'circle',
          title: '右眼',
          x: 290,
          y: 165,
          radius: 5,
          startAngle: 0,
          endAngle: Math.PI * 2,
          direction: true,
          fillColor: '#000',
          strokeColor: 'green',
        },
      ]
    },
    {
      type: 'line',
      title: '划线',
      x: 100,
      y: 300,
      lines: [[250, 350], [360, 300], [300, 280], [200, 280]],
      lineWidth: 3,
      strokeColor: '#ff0000',
    },
    {
      type: 'line',
      title: '划线',
      x: 100,
      y: 300,
      lines: [[150, 250], [160, 200], [100, 280], [100, 280]],
      lineWidth: 3,
      strokeColor: '#0000ff',
    },
  ]
})
onMounted(() => {
  // 初始化 Canvas 类实例
  canvasInstance = new Canvas('myCanvas');
  // 设置默认画布大小
  canvasInstance.setSize(canvasData.width, canvasData.height);
  draw()
});

// 点击按钮绘制矩形
const draw = () => {
  if (!canvasInstance) return
  canvasInstance.clear();
  canvasInstance.draw(canvasData.options);
};

// 清空画布
const clear = () => {
  if (!canvasInstance) return
  canvasInstance.clear();
};
</script>

<style scoped>
.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

canvas {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>